<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="progress">
      <div class="progress-bar"  style="width: 60%;">
        <span class="sr-only">60% Complete</span>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="progress">
      <div class="progress-bar"  style="width: 60%;">
        <span >60% </span>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="progress ">
      <div class="progress-bar progress-bar-success  progress-bar-striped"style="min-width: 20em;">
        20%
      </div>
    </div>
  </div>
  

  <div class="container">
    <div class="progress ">
      <div class="progress-bar progress-bar-info  progress-bar-striped active"style="min-width: 20em;">
        20%
      </div>
    </div>
  </div>


  <div class="container">
    <div class="progress ">
      <div class="progress-bar progress-bar-danger  progress-bar-striped pro"style="min-width: 50em;">
        50%
      </div>
    </div>
    <button class="btn btn-danger">上传</button>
  </div>

  <div class="container">
    <div class="progress">
      <div class="progress-bar progress-bar-info  progress-bar-striped"  style="width: 30%;">
        <span >30% </span>
      </div>
      <div class="progress-bar progress-bar-warning  progress-bar-striped"  style="width: 20%;">
        <span >20% </span>
      </div>
      <div class="progress-bar progress-bar-danger  progress-bar-striped"  style="width: 40%;">
        <span >40% </span>
      </div>
    </div>
  </div>
  
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
  var num=50;

  $(".btn").click(function(){
    fn();
    $(".pro").addClass("active");
  })
  function fn(){
    setInterval(function(){
      num++;
      if(num>100){
        num=100;
      }
      $(".pro").text(num+"%");
      $(".pro").css("width",num+"em")
    },50)
  }
</script>

</body>
</html>